<template>
  <div class="add-component" v-clickoutside="handleClose">
    <span class="add-btn btn" @click="showGradeList = !showGradeList"
      >添加</span
    >
    <ul class="grade-list" v-if="showGradeList">
      <li
        v-for="item in gradeList"
        :key="item.id"
        @click="chooseGrade(item)"
        :class="{ current: item.id === grade.id }"
      >
        {{ item.name }}
      </li>
    </ul>
    <ul class="class-list" v-if="showClassList">
      <li
        v-for="item in classList"
        :key="item.F_class_id"
        :class="{ current: item.F_class_id === classItem.F_class_id }"
        @click="chooseClass(item)"
      >
        {{ item.F_class_name }}
      </li>
    </ul>
    <ul class="subject-list" v-if="showSubjectList && level === 'subject'">
      <li
        v-for="item in subjectList"
        :key="item.id"
        :class="{ current: item.id === subject.id }"
        @click="chooseSubject(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import Clickoutside from '@/utils/clickoutside';
import { mapState } from 'vuex';
export default {
  name: 'AddClass',
  directives: { Clickoutside },
  props: {
    level: {
      type: String,
      default: 'class',
    },
  },
  data() {
    return {
      gradeList: [],
      classList: [],
      subjectList: [],
      grade: {},
      classItem: {},
      subject: {},
      showGradeList: false,
      showClassList: false,
      showSubjectList: false,
    };
  },
  computed: {
    ...mapState('school', ['schoolOptions']),
  },
  watch: {
    showGradeList(val) {
      if (val === false) {
        this.showClassList = this.showSubjectList = false;
      }
    },
  },
  mounted() {
    const { F_grades, F_subjects } = this.schoolOptions;
    for (let i in F_grades) {
      const res = this.$maps.gradeList.find((e) => e.id === Number(i));
      this.gradeList.push(res);
    }
    this.subjectList = JSON.parse(JSON.stringify(F_subjects));
  },

  methods: {
    handleClose() {
      this.showGradeList = false;
      this.grade = {};
      this.classItem = {};
      this.subject = {};
    },
    chooseGrade(item) {
      this.grade = item;
      this.classList = this.schoolOptions.F_grades[this.grade.id];
      this.showClassList = true;
      this.showSubjectList = false;
      this.classItem = {};
    },
    chooseClass(item) {
      this.classItem = item;
      if (this.level === 'subject') {
        this.showSubjectList = true;
        this.subject = {};
      } else {
        const manageItem = {
          F_grade: this.grade.id,
          F_id: this.classItem.F_class_id,
          F_name: this.classItem.F_class_name,
        };
        this.$emit('add', manageItem);
        this.handleClose();
      }
    },
    chooseSubject(item) {
      this.subject = item;
      this.showGradeList = false;
      const teachItem = {
        F_grade: this.grade.id,
        F_id: this.classItem.F_class_id,
        F_name: this.classItem.F_class_name,
        F_subject: this.subject.id,
        F_subject_name: this.subject.name,
      };
      this.$emit('add', teachItem);
      this.handleClose();
    },
  },
};
</script>

<style lang="less" scoped>
.add-component {
  position: relative;
  .add-btn {
    padding: 4px 10px;
    background-color: #009cff;
    color: #fff;
  }
  .grade-list,
  .class-list,
  .subject-list {
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border-radius: 4px;
    border: solid 2px #f5f5f5;
    height: 150px;
    overflow: auto;
    ::-webkit-scrollbar {
      width: 3px;
    }
    li {
      cursor: pointer;
      height: 30px;
      line-height: 30px;
      &:hover {
        background-color: #ebf5ff;
      }
    }
    .current {
      background-color: #ebf5ff;
    }
  }
  .grade-list {
    width: 120px;
    top: 25px;
    left: 0;
  }
  .class-list {
    width: 180px;
    top: 25px;
    left: 120px;
  }
  .subject-list {
    width: 130px;
    top: 25px;
    left: calc(120px + 180px);
  }
}
</style>
